<template >
    <div class="pages">
        <van-sticky>
            <div class="header">
                <div class="fls" @click="$router.back(-1)">
                    <img src="../../../static/images/icon-back.png" alt="">
                </div>
                <div class="centern">重置登录密码</div>
                <div class="fls"></div>
            </div>
        </van-sticky>

        <div class="intebrf">
            <div class="tubstress">
                <div class="zuobiande">
                    <div class="icon">
                        <img src="../../../static/images/icon-phone-black.png" alt="">
                    </div>
                    <div class="zuobnians">{{phone}}</div>
                </div>
                <!-- <div class="youbiandes"></div> -->
            </div>
            <div class="tubstress">
                <div class="zuobiande">
                    <div class="icon">
                        <img src="../../../static/images/icon-login-code-black.png" alt="">
                    </div>
                    <div class="zuobnians">
                        <input type="number" v-model="code" placeholder="请输入验证码">
                    </div>
                </div>
                <van-button plain :loading="codestype"  :disabled="codestype" v-if="codeShow" type="info" class="youbiande" loading-text="发送中..." block @click="getPhoneCodeqianyi()">获取验证码</van-button>
                <van-button plain v-if="!codeShow" type="info" class="youbiande" block @click="getPhoneCode()">{{count}}秒后重试</van-button>
            </div>

            <div class="tubstress">
                <div class="zuobiande">
                    <div class="icon">
                        <img src="../../../static/images/icon-password-black.png" alt="">
                    </div>
                    <div class="zuobnians">
                        <input type="password" v-model="password" placeholder="请设置登录密码(6-12位)">
                    </div>
                </div>
                <!-- <div class="youbiandes"></div> -->
            </div>

            <div class="tubstress">
                <div class="zuobiande">
                    <div class="icon">
                        <img src="../../../static/images/icon-password-black.png" alt="">
                    </div>
                    <div class="zuobnians">
                        <input type="password" v-model="newpassword" placeholder="请在此输入密码">
                    </div>
                </div>
                <!-- <div class="youbiandes"></div> -->
            </div>
        </div>

        <div class="niceckead">
            <van-button type="primary" @click="decision()"  color="#3288FF" block>确定</van-button>
            <!-- <div class="isok" @click="close()">确定</div> -->
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';

import Vue from 'vue'
import api from '../../api/PublicInterface'
Vue.prototype.$api = api
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
    },
    data(){
        return{
            codestype:false,
            codeShow: true,  //判断显示隐藏
            count: '',     //显示时的文字内容
            timer: null,


            phone:'',//手机号
            userinfoing:{},


            code:'',//验证码
            password:'',//密码
            newpassword:'',//再次输入的喵喵
        }
    },
    mounted(){
        this.userinfo();//获取用户信息接口
    },
    methods:{
        // 获取用户信息接口
        userinfo(){
            this.$api.userinfo().then((res) =>{
                if(res.status == '0000'){
                    this.userinfoing = res.payload;
                    this.phone = res.payload.phoneNo.substr(0, 3) + '****' + res.payload.phoneNo.substr(7)
                }else{
                    Toast(res.describe);
                }
            })
        },



        getPhoneCodeqianyi(){
            this.codestype = true
            setTimeout(() => {
                this.codestype = false
                this.getPhoneCode()
            }, 1000);
        },
         getPhoneCode() {
            const params ={
                phoneNo: this.userinfoing.phoneNo,//手机号
                type: 'RESET_PASSWORD',//短信类型.
            }
            this.$api.sendSms(params).then((res) =>{
                console.log(res)
                if(res.status == '0000'){
                    //点击获取验证码
                    const TIME_COUNT = 60;  //倒计时60秒
                    if (!this.timer) {
                        this.count = TIME_COUNT;
                        this.codeShow = false;
                        this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.codeShow = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                        }, 1000);
                    }
                }else{
                    Toast(res.describe);
                }
            })
        },



        // 修改密码
        decision(){
            if(this.code == ''){
                Toast('填写原手机号验证码');
                return;
            }
            if(this.password == ''){
                Toast('请输入新密码');
                return;
            }
            if(this.password != this.newpassword){
                Toast('两次密码输入不一致');
                return;
            }

            const params = {
                checkValue:this.code,   //验证码
                newPassword:this.password,//新密码
            }

            this.$api.password(params).then((res) =>{
                console.log(res)
                if(res.status == '0000'){
                    Toast('修改成功');
                    localStorage.setItem('mytoken','')
                     setTimeout(() => {
                        this.$router.push({ name: "login" });
                    }, 1000);
                }else{
                    Toast(res.describe);
                }
            })

        },
    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }

    .intebrf{
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        background: #fff;
    }
    .tubstress{
        width: 100%;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .zuobiande{
        width: 70%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }
    .icon{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .icon>img{
        width: 100%;
        height: 100%;
    }
    .zuobnians{
        width: 86%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .zuobnians>input{
        width: 100%;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
        border: 0;
    }

    .youbiande{
        width: 88px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        border: 1px solid #3288FF;
        color: #3288FF;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }
    button{
        padding: 0 !important;
    }
    .niceckead{
        width: 100%;
        margin-top: 40px;
        padding: 0 16px;
        box-sizing: border-box;
    }
    .isok{
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: #3288FF;
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
    }
</style>